<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题栏</title>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    <script type="text/javascript" src="../../js/jquery-latest.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../js/lightSlider/css/lightSlider.css" />
    <script type="text/javascript" src="../../js/lightSlider/js/jquery.lightSlider.js"></script>
    
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
    
    <script type="text/javascript">

	  	//itemCount需要大于等于一级菜单个数
	    function setLightSlider(itemCount){
	
	    	$("#top_menu").lightSlider({
	            item: itemCount,//显示内容个数
	            slideMove: 3,
	            autoWidth: true,
	            slideMargin: 0,//内容间隔
	
	            addClass: '',
	            mode: "slide",
	            useCSS: true,
	            cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
	            easing: 'linear', //'for jquery animation',////
	
	            speed: 400, //ms'
	            auto: false,
	            loop: false,
	            pause: 2000,
	
	            keyPress: true,
	            controls: true,
	            prevHtml: '',
	            nextHtml: '',
	
	            rtl:false,
	            adaptiveHeight:false,
	
	            vertical:false,
	            verticalHeight:500,
	            vThumbWidth:100,
	
	            thumbItem:10,
	            pager: false,
	            gallery: false,
	            galleryMargin: 5,
	            thumbMargin: 5,
	            currentPagerPosition: 'left', //当前页显示的方式
	
	            enableTouch:true,
	            enableDrag:true,
	            freeMove:false,
	            swipeThreshold: 40,
	
	            responsive : [],
	
	            onBeforeStart: function (plugin) {},
	            onSliderLoad: function (plugin) {/* alert('装载成功'); */},
	            onBeforeSlide: function (plugin, scene) {},
	            onAfterSlide: function (plugin, scene) {},
	            onBeforeNextSlide: function (plugin, scene) {},
	            onBeforePrevSlide: function (plugin, scene) {}
	        });
	    }


		/*绑定菜单悬浮显示效果*/
		function bindMenuOverFunc(){

			$('#top_menu > li > a').unbind("mouseover");
			$('#top_menu > li > a').unbind("mouseout");

			$('#top_menu > li > a').bind('mouseover', openSubMenu);
	    	$('#top_menu > li > a').bind('mouseout', closeSubMenu);
		}

		function changeSelectClass(obj){
			var menu = $("#" + obj.id);
			menu.parent(".d2").siblings().attr("class", "d2");
    		menu.parent(".d2").attr("class", "d1");
		}


		$(function () {
	    	//loadLocalJSON();

	    	initNavMenu($('#topframe', parent.document).attr("jsondata"));

	    	//debugger;

	    	//bindMenuOverFunc();
	    	
	    	$('#top_menu > li > a').bind('click', function(){
	    		//取得元素的兄弟节点切换其class为d2并设置当前选择为d1
	    		$(this).parent(".d2").siblings().attr("class", "d2");
	    		$(this).parent(".d2").attr("class", "d1");
	    	});
	
	    	/*绑定语言切换*/
	        $("#language_span").click(function (event) {
				/*取父页面装载*/
	            parent.$('#language_menu').menu({
	                minWidth: 10
	            });
	
	            parent.$('#language_menu').menu('show', {
	                left: event.pageX - 5,
	                top: event.pageY + 15
	            });
	        });
	    	
	    	/*绑定菜单收集*/
	        $("#coll_span").click(function (e) {
	        	
	        	parent.$("#coll_menu").css("top", e.clientY + 15);
	        	parent.$("#coll_menu").css("left", e.clientX - 250);
	        	parent.$('#coll_menu').toggle();
	        });
	    	
	        parent.$("table[class='table-striped'] tbody tr:nth-child(odd) td").css({"background-color":"#e0edfe", "text-align":"left"});
	        parent.$("table[class='table-striped'] tbody tr:nth-child(even) td").css({"background-color":"white","text-align":"left"});


			/*延迟几秒加载以解决chrome异常*/
	        setTimeout(function() {
                //e.preventDefault();
                //refresh.init();
                //setLightSlider(8);
	        	getFirstNavMenuCount($('#topframe', parent.document).attr("jsondata"));
            }, 200);
	        
	    });

		/*初始化导航栏menu*/
	    function initNavMenu(jsonurl){
	    	$.get(jsonurl, function(content){ 
	    		var json = $.parseJSON(content);
	    		//如果数据为空则直接加载
	    		if($.isEmptyObject(json)){
	    			json = content;
	    		}
	    		//debugger;
	    		$("#top_menu").html("");
	    		$.each(json.navs, function(i, item){
	    			addMenu(i, item);
	    		});
	    	});

	    	bindMenuOverFunc(); 
		}

		/*获取一级菜单数量并设置超过8个设置滚动*/
		function getFirstNavMenuCount(jsonurl){
			
			$.get(jsonurl, function(content){ 
	    		var json = $.parseJSON(content);
	    		//如果数据为空则直接加载
	    		if($.isEmptyObject(json)){
	    			json = content;
	    		}

	    		//alert(json.navs.length);

		    	if(json.navs.length > 8){
		    		setLightSlider(8);
			    }else{
					return;
				}
	    	});
		}

		/*动态加入一级菜单*/
		function addMenu(i, obj){
			
			var str = '';

			if(i == 0){
				str += '<li class="d1">';
			}else{
				str += '<li class="d2">';
			}

			str += '<a id="_' + i + '"';
			
			if(obj.url.toString() == "js"){
				str += ' href="javascript:void(0);" ';
				str += ' onclick="parent.loadLocalJSON(' + i + ');changeSelectClass(this);" >';//maybe
			}else{
				str += ' href="#" onmouseover="openSubMenu2(this);" onmouseout="closeSubMenu2(this);" onclick="changeSelectClass(this);" >';
			}

			str += obj.name + '</a>';

			//alert(str);

			$("#top_menu").append(str);

			//加载二级菜单
			if(obj.menus.length > 0){
				//alert(obj.menus.length);
				putSecondMenus(i, obj);
			}
		}

		/*设置二级菜单*/
		function putSecondMenus(i, obj){

			//debugger;

			var id = 'menu_' + i;
			var str = '<div id="' + id + '"  class="easyui-menu" data-options="onClick:menuHandlerForIframe">';

			$.each(obj.menus, function(j, t){

				var menuStr = '<div href="javascript:void(0);" data-options="name:\'' + id + '\'"';

				if(t.hasNext.toString() == "true"){
					menuStr += ' onclick="load4Menu(' + i + j + ');">';
				}else{
					menuStr += ' onclick="alert(this.innerText);">';
				}
				
				menuStr += t.name + '</div>';

				str += menuStr;

				//alert(menuStr);

			});

			str += '</div>';

			//alert(str);
			//console.log(str);

			//$('#menu', parent.document).html(str.toString());
			$('#menu', parent.document).append(str.toString());
			//$('#menu').append(str);
			//parent.$('#menu').appendTo(str);
		}

		/*四级菜单加载*/
		function openSubMenu() {
			var menuId = '#menu'+$(this).attr('id');
			var y = $(this).offset().top;
			var x = $(this).offset().left;
			parent.$(menuId).menu({
				minWidth : 10
			}).menu('show', {
				left : x-16,
				top : y+26
			});
			
		}
		
		/*四级菜单加载*/
		function openSubMenu2(obj) {
			
			var parmenuId = '#menu'+obj.id;
			var menu = $("#" + obj.id);

			var y = menu.offset().top;
			var x = menu.offset().left;
			parent.$(parmenuId).menu({
				minWidth : 10
			}).menu('show', {
				left : x-16,
				top : y+26
			});
		}

		/*四级菜单关闭*/
		function closeSubMenu() {
			var menu = parent.$('#menu'+$(this).attr('id'));
			if(menu.length==0) return false;
			
			var offset = menu.offset();
			var top = offset.top;
			var left = offset.left;
			var bottom = top+menu.height();
			var right = left+menu.width();
			var x = event.x;
			var y = event.y+10;
			//alert("top="+top+",bottom="+bottom+",left="+left+",right="+right+",x="+x+",y="+y);
			if( x<left || x>right || y<top || y>bottom ){// 鼠标不在下拉菜单范围内，隐藏下拉菜单
				menu.menu('hide');
			}
		}

		/*四级菜单关闭*/
		function closeSubMenu2(obj) {
			var parmenuId = '#menu'+obj.id;
			var menu = parent.$(parmenuId);
			if(menu.length==0) return false;

			//debugger;
			
			var offset = menu.offset();
			var top = offset.top;
			var left = offset.left;
			var bottom = top+menu.height();
			var right = left+menu.width();
			//var x = event.x;
			//var y = event.y+10;
			
			var x = event.offsetX;
			var y = event.offsetY;
			//alert("top="+top+",bottom="+bottom+",left="+left+",right="+right+",x="+x+",y="+y);
			console.log("top="+top+",bottom="+bottom+",left="+left+",right="+right+",x="+x+",y="+y);

			x = event.x;
			y = event.y+30;
			console.log("top="+top+",bottom="+bottom+",left="+left+",right="+right+",x="+x+",y="+y);
			if( x<left || x>right || y<top || y>bottom){// 鼠标不在下拉菜单范围内，隐藏下拉菜单
				menu.menu('hide');
				//
			}
		}
    
    </script>
</head>
<body>

	<div class="all">

        <div class="head">
            <div class="headl">
                <div class="logo">
                    <img src="../../images/chyine1.png" usemap="#Map" border="0" />
                    <map name="Map" id="Map">
                      <area shape="rect" coords="0,4,40,44" href="javascript:void(0);" target="_self" alt="" title="返回首页" onclick="parent.showIndex();"/>
                    </map>
                </div>
                <div class="daohang">
                    <ul id="top_menu">

                    </ul>
                </div>
            </div>
            <div class="headr">
                <div class="r1"></div>
                <div class="r2">
                    <div class="r3">
                        <div class="r4">
                            <ul>
                                <li><img id="coll_span" src="../../images/header_coll_easyicon_net_16.png" style="cursor: pointer;"/></li>
                            	<li>收藏夹	</li>
                                <li><img src="../../images/chyine8.png" /></li>
                                <li>管理员	切换语言：</li>
                                <li><img id="language_span" src="../../images/chyine7.png" style="cursor: pointer;" /></li>
                                <li>&nbsp;&nbsp;<a href="login.html" style="color: #fff">注销</a></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                        
                        <marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>
                        	<a href="#" style="color: #fff">您有<font style="color:#F00"> 3 </font>条待办消息</a>
                        </marquee>
                        
                        <div>天气预报：北京 多云&nbsp; <img  src="../../images/header_weather_easyicon_net_16.png"/>&nbsp;13℃-24℃ &nbsp;当前时间：<span id="time"></span></div>
                         
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

    </div>
    
</body>
</html>